<script setup>
import { ref, computed, watch, onBeforeUpdate } from 'vue'
import { usePlayListStore } from '@/stores'
const playListStore = usePlayListStore()
import { useMusicCell } from '@/composables/musicCell.js'
const musicCell = useMusicCell()
// 歌单列表
const anchors = [
  -1,
  Math.round(0.6 * window.innerHeight),
  Math.round(0.8 * window.innerHeight)
]
const height = ref(anchors[0])
// const showPlayList = ref(false)
const isScroll = computed(() => {
  return height.value >= 0
})

const musicArr = ref([])
// 显示歌单模态框
// const isShowPlayModal = ref(false)
const onShowPlayModal = (musicsArr) => {
  if (!isScroll.value) {
    height.value = anchors[1]
    // showPlayModal.value = true
    musicArr.value = musicsArr
  } else {
    height.value = anchors[0]
    // showPlayModal.value = false
  }
}

// 歌单列表信息
const listInfo = ref([])
listInfo.value = playListStore.getListInfo()
// 新建歌单对话框组件
const playTitleInputRef = ref()
const onNewPlay = (title) => {
  // listInfo.value.push({
  //   title: title,
  //   total: 0,
  //   name: '',
  //   singer: ''
  // })
  playListStore.addPlay({
    title: title,
    list: []
  })
  listInfo.value = playListStore.getListInfo()
  showNotify({ type: 'primary', message: '新建成功' })
}
// 歌单列表
const checked = ref([]) // 选中的歌单
const checkboxRefs = ref([])
const toggle = (index) => {
  checkboxRefs.value[index].toggle()
}

onBeforeUpdate(() => {
  checkboxRefs.value = []
})
// 多选框组 组件
const checkboxGroup = ref(null)

const isCheckAll = computed(() => {
  return checked.value.length === listInfo.value.length
})
// 全选 取消全选
const checkAll = () => {
  checkboxGroup.value.toggleAll(!isCheckAll.value)
}
// 反选
const toggleAll = () => {
  checkboxGroup.value.toggleAll()
}

// 添加到歌单
const onAddToPlay = async () => {
  if (checked.value.length === 0) {
    showNotify({ type: 'danger', message: '未选择歌单' })
    return
  }
  // if (props.musicArr.length === 1){
  //   await musicCell.addLike(props.musicArr[0], checked.value)
  // } else{
  //   await musicCell.addLike(props.musicArr, checked.value)
  // }
  await musicCell.addLike(musicArr.value, checked.value)
  height.value = anchors[0]
}
watch(height, (newValue) => {
  if (newValue === anchors[0]) {
    checked.value = []
  }
})
// 导出
defineExpose({
  isScroll,
  onShowPlayModal
})
</script>

<template>
  <van-floating-panel
    safe-area-inset-bottom
    :lock-scroll="isScroll"
    v-model:height="height"
    :anchors="anchors"
  >
    <template #header>
      <div class="middle"></div>
      <div class="head">
        <!-- <i>
          <van-icon name="cross" @click.stop="onClosePlayList()" size="18px" />
        </i> -->
        <span class="head-title">将歌曲添加到</span>
        <span class="head-butt van-haptics-feedback" @click="onAddToPlay()"
          >确认({{ checked.length }})</span
        >
        <!-- <van-button type="default" hairline>确认</van-button> -->
      </div>
      <div class="operate">
        <van-button
          type="primary"
          plain
          hairline
          size="small"
          @click="checkAll"
          style="margin-right: 8px"
        >
          {{ isCheckAll ? '取消全选' : '全选' }}
        </van-button>
        <van-button
          type="primary"
          plain
          hairline
          size="small"
          @click="toggleAll"
        >
          反选
        </van-button>
      </div>
    </template>
    <!-- 列表 -->
    <template #default>
      <van-cell-group inset border class="van-hairline--bottom">
        <van-cell
          title="新建歌单"
          @click="playTitleInputRef.showDialog(`新建歌单${listInfo.length}`)"
          center
          clickable
          border
        >
          <template #icon>
            <div class="item-right">
              <van-icon size="26px" name="plus" />
            </div>
          </template>
        </van-cell>
      </van-cell-group>
      <van-checkbox-group v-model="checked" ref="checkboxGroup">
        <van-cell-group inset>
          <van-cell
            center
            clickable
            v-for="(item, index) in listInfo"
            @click="toggle(index)"
            :key="item.id"
          >
            <template #title>
              <span>{{ item.title }}</span>
            </template>
            <template #label>
              <p>共 {{ item.total }} 首</p>
            </template>
            <template #right-icon>
              <van-checkbox
                :name="item.id"
                :ref="(el) => (checkboxRefs[index] = el)"
                @click.stop
              />
            </template>
            <template #icon>
              <div class="item-right">
                <van-icon size="30px" name="play-circle-o" />
              </div>
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
      <div class="bottom"></div>
    </template>
  </van-floating-panel>
  <!-- 新建歌单弹窗 -->
  <PlayTitleInput
    ref="playTitleInputRef"
    @new-play="onNewPlay"
  ></PlayTitleInput>
  <!-- </van-overlay> -->
</template>
<style scoped>
/* 歌单列表 */
/* 新建歌单 */
.item-right {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  width: 60px;
  height: 60px;
  margin-right: 10px;
  border: 1.5px solid #f7f7f7;
}
.head {
  padding-left: 10px;
  padding-right: 22px;
  line-height: 50px;
  display: flex;
  align-content: space-between;
  justify-content: space-between;
  text-align: center;
  /* border-bottom: 1px solid #e7e5e5; */
}
.middle {
  margin: auto;
  margin-top: 8px;
  width: 50px;
  height: 4px;
  background-color: #cccaca;
  border-radius: 10px;
  text-align: center;
}
.head .head-title {
  font-size: 18px;
  font-weight: 700;
}
.head .head-butt {
  font-size: 15px;
}
.operate {
  padding-right: 15px;
  text-align: right;
  border-bottom: 1px solid #e7e5e5;
}
.bottom {
  height: 20px;
}
</style>
